<template>
  <div ref="containerEl" class="containerEl" :style="{ height: height + 'px' }">
    <SplitBar
      @move-start="onMoveStart"
      @move-end="onMoveEnd"
      @moving="onMoving"
    ></SplitBar>
    <div class="slot-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import SplitBar from './SplitBar.vue'

const props = withDefaults(
  defineProps<{
    size?: number
    max?: string | number
    min?: string | number
  }>(),
  {
    size: 800
  }
)

// 当前可视区的高度
const viewportHeight = window.innerHeight

// 默认是max 可滑动的最大高度，现在思路：默认最大可滑动高度为 可视区的高度 后面根据情况来定
const defaultMaxHeight = window.innerHeight

// 默认值min 可滑动的最小高度，现在思路：默认最小滑动高度为 可视区的10% 后面根据情况来定
const defaultMinHeight = window.innerHeight * 0.1

// 当前容器的高度
const height = ref<number>(props.size)
// 开始容器的高度
let startHeight = 0

// 默认可滑动的做大高度
let maxHeight = defaultMaxHeight

// 默认可滑动的最小高度
let minHeight = defaultMinHeight

// 开始触摸  初始化数据
const onMoveStart = () => {
  startHeight = height.value
  // maxHeight = countMaxHeight()
  // minHeight = countMinHeight()
  // init()
}
const onMoveEnd = () => {}

const Emit = defineEmits<{
  (e: 'moving', offset: number, height: number): void
}>()
const onMoving = (offset: number) => {
  const newHeight = startHeight - offset // 注意：向上拖拽offset为负
  // height.value = Math.max(100, newHeight) // 设置最小高度100px

  height.value = Math.min(Math.max(newHeight, minHeight), maxHeight)

  Emit('moving', newHeight, height.value)
  console.log(height.value)
}

// 计算滑动最大能滑动多高
function countMaxHeight() {
  let max = defaultMaxHeight
  // 判断当前是否传入max, 如果传入
  if (typeof props.max !== 'undefined') {
    // 判断max传入的如果是 数字
    if (typeof props.max === 'number') {
      max = props.max as number
    }
    // 判断当前传入的如果是 字符串（百分比）
    if (typeof props.max === 'string') {
      max = viewportHeight * percentToDecimal(props.max as string)
    }
  }
  return max
}

// 计算滑动最小能滑动多高
function countMinHeight() {
  let min = 100
  // 判断当前是否传入min，如果传入
  if (typeof props.min !== 'undefined') {
    // 判断min传入的是如果是 数字
    if (typeof props.min === 'number') {
      min = props.min as number
    }
    // 判断当前传入的如果是 字符串 （百分比）
    if (typeof props.min === 'string') {
      min = viewportHeight * percentToDecimal(props.min as string)
    }
  }
  return min
}

// 百分比转换小数
function percentToDecimal(percentStr: string) {
  // 验证输入是否为字符串
  if (typeof percentStr !== 'string')
    throw new TypeError('类型必须是字符串类型')

  // 使用正则验证百分比格式
  const percentRegex = /^[-+]?\d+(\.\d+)?%$/
  if (!percentRegex.test(percentStr.trim()))
    throw new Error('请示输入正确的百分比格式')

  // 转换逻辑
  const number = parseFloat(percentStr.replace('%', ''))
  return number / 100
}

onMounted(() => {
  // // 判断边界值
  init()
})

// 处理边界
function init() {
  maxHeight = countMaxHeight()
  minHeight = countMinHeight()
  console.log(maxHeight, minHeight)

  // 如果 可滑动的最小高度 大于 可滑动的最大高度,那么 min 和 max值互换
  if (maxHeight < minHeight) {
    ;[minHeight, maxHeight] = [maxHeight, minHeight]
  }
  console.log(maxHeight, minHeight)

  // 如果滑块内容高度大于最大可滑动
  // startHeight = height.value
  if (height.value > maxHeight) {
    height.value = maxHeight
    startHeight = maxHeight
    return false
  }
  // 如果滑块内容高度 小于 可滑动的最小高度
  if (height.value < minHeight) {
    height.value = minHeight
    startHeight = minHeight
    return false
  }
  startHeight = height.value
}
</script>

<style scoped lang="scss">
.containerEl {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 1rem;
  box-shadow: 0px -10px 20px 0px rgba(89, 92, 94, 0.1);
  transform: translate3d(0, 0, 0);
  will-change: height;
}
.slot-content {
  height: 100%;
  // background-color: yellow;
  background-color: #fff;
}
</style>
